<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List of Dict</title>
<!-- base lib -->
<script type="text/javascript" src="../../../script/jquery.js"></script>
<script type="text/javascript" src="../../../script/util.js"></script>

<!-- third party lib -->
<link rel="stylesheet" type="text/css" href="../../../plugin/flexigrid/css/flexigrid/flexigrid.css">
<script type="text/javascript" src="../../../plugin/flexigrid/flexiform.js"></script>


<!-- my lib -->
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
        
.flexigrid div.fbutton .add {
  background: url(../../../plugin/flexigrid/css/images/add.png) no-repeat center left;
}   

.flexigrid div.fbutton .delete {
  background: url(../../../plugin/flexigrid/css/images/close.png) no-repeat center left;
}   

.flexigrid div.fbutton .edit {
  background: url(../../../plugin/flexigrid/css/images/modify.png) no-repeat center left;
}   

        
</style>

<script type="text/javascript">
var dataGrid = null ;

window.onload=function (){
	dataGrid = $(".flexme1").flexigrid(
        {
            buttons : [
                {name :'添加',bclass:'add',onpress:toAdd},
                {name :'修改',bclass:'edit',onpress:toEdit},
                {name :'删除',bclass:'delete',onpress:doDelete},
                {name :'选取',bclass:'search',onpress:doSelect},
                {separator : true}
                ],
            usepager: true,
            title: '这个是我的测试表格',
            useRp: true,
            rp: 15,
            width: 880,
            //onSubmit: doList,
            height: 400
	    }
	);

    doList();

}

function doList() {
	
    return true;
}

var windowParams = getWindowParams(window.name) ;

function doSelect() {
    var ids = dataGrid.getSelectedIds() ;


    windowParams.onReturn(ids[0]) ;
    
    windowParams.windowMe.dialog("close");

    window.href = "" ;
}

function toAdd() {
}



function toEdit() {
}

function doDelete() {
}

</script>
</head>
<body topmargin="0" leftmargin="0">

<table class="flexme1">
    <thead>
            <tr>
                <th width="100">Col 1</th>
                <th width="100">Col 2</th>
                <th width="100">Col 3 is a long header name</th>
                <th width="531">Col 4</th>
            </tr>
    </thead>
    <tbody>
            <tr>
                <td>This is data 1 with overflowing content</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            <tr>
                <td><select ><option>sss</option><option>sss</option></select></td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            
    </tbody>
</table>

</body>
</html>